<template>
  <div
    class="video-management-container animate__faster animate__animated animate__fadeIn"
  >
    <!-- 顶部条件筛选 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <SelectBlock
            :allowClear="true"
            v-model="conditions.orgCode"
            @change="blockChange($event)"
          ></SelectBlock>
          <a-input
            v-model="conditions.fileName"
            allowClear
            placeholder="请输入文件名称"
          ></a-input>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
          <a-button type="primary" @click="exportData()">全部导出</a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="video-volatility-body">
      <div class="data-report-body">
        <div class="video-menu">
          <div class="zhgd-data-report-header" header="文档管理">
            <div class="video-menu-icon">
              <bj-icon
                style="cursor: pointer"
                type="xinzenggenjiedian"
                @click.native="handelTreeMenu('parentNode')"
              ></bj-icon>
            </div>
          </div>
          <div class="video-search">
            <a-input-search
              placeholder="请输入关键词"
              style="width: 100%"
              v-model="conditions.nodeName"
              @search="getTreeData"
            />
          </div>
          <div class="video-menu-tree">
            <a-empty v-if="treeData.length == 0" />
            <a-tree
              v-else
              blockNode
              show-icon
              v-model="checkedKeys"
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              :replaceFields="{
                children: 'zhgdNewFileNodeList',
                title: 'nodeName',
                key: 'id',
              }"
              @expand="onExpand"
              @select="onSelect"
            >
              <template
                slot="title"
                slot-scope="{
                  fileNum,
                  nodeName,
                  id,
                  zhgdDeptCode,
                  parentNode,
                  nodeSort,
                }"
              >
                <a-tooltip>
                  <template slot="title">
                    {{ nodeName }}({{ fileNum }})
                  </template>
                  <span>{{ nodeName }}({{ fileNum }})</span>
                </a-tooltip>
                <span style="position: absolute; right: 0">
                  <bj-icon
                    type="xinzengzijiedian"
                    class="right-icon"
                    @click.native.stop="
                      handelTreeMenu('childNode', id, zhgdDeptCode)
                    "
                  ></bj-icon>
                  <bj-icon
                    @click.native.stop="
                      handelTreeMenu(
                        'edit',
                        id,
                        zhgdDeptCode,
                        parentNode,
                        nodeSort,
                        nodeName
                      )
                    "
                    type="bianji"
                    class="right-icon"
                  ></bj-icon>
                  <bj-icon
                    @click.native.stop="handelTreeMenu('delete', id, nodeName)"
                    class="right-icon"
                    type="shanchu"
                  ></bj-icon>
                </span>
              </template>
              <template slot="custom" slot-scope="{ zhgdNewFileNodeList }">
                <img
                  v-if="zhgdNewFileNodeList.length != 0"
                  class="menu-icon"
                  src="https://jszhgd.cn/static/pc/folder.png"
                />
                <img
                  v-else
                  class="menu-icon"
                  src="https://jszhgd.cn/static/pc/file.png"
                />
              </template>
            </a-tree>
          </div>
        </div>
        <div class="video-body">
          <div class="zhgd-data-report-header" header="工程管理文件">
            <div>
              <a-button type="primary" @click="add()" v-if="treeItem">
                新增
              </a-button>
            </div>
          </div>
          <div class="video-menu-list" v-loading="loading">
            <vxe-table
              :data="tableData"
              :column-config="{ resizable: true }"
              class="scrollbarStyle"
              height="99%"
              align="center"
            >
              <vxe-column type="seq" title="序号" width="80"></vxe-column>
              <vxe-column
                field="sortNum"
                title="文件编号"
                min-width="120"
              ></vxe-column>
              <vxe-column
                field="fileName"
                title="文件名称"
                min-width="120"
              ></vxe-column>
              <vxe-column
                field="travelDate"
                title="形成时间"
                min-width="200"
              ></vxe-column>
              <vxe-column
                field="source"
                title="来源"
                min-width="120"
              ></vxe-column>
              <vxe-column
                field="engineeringStage"
                title="工程阶段"
                min-width="120"
              ></vxe-column>
              <vxe-column title="操作" fixed="right" width="220">
                <template slot-scope="scope">
                  <div class="text-button-group">
                    <a-button type="text" @click="check(scope.row)">
                      查看
                    </a-button>
                    <a-button type="text" @click="edit(scope.row)">
                      编辑
                    </a-button>
                    <a-button
                      type="text"
                      class="del"
                      @click="handleDelClick(scope.row)"
                    >
                      删除
                    </a-button>
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <div>
            <vxe-pager
              background
              :current-page="pager.page"
              :page-size="pager.pageSize"
              :total="pager.total"
              :layouts="[
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'Sizes',
                'FullJump',
              ]"
              @page-change="paginationChange"
            >
              <template #left>
                <div class="vxe-pager-left-tip-container">
                  第<span>1</span>到<span
                    >{{ Math.ceil(pager.total / pager.pageSize) }} 页</span
                  >共 <span> {{ pager.total }}</span
                  >条记录
                </div>
              </template>
            </vxe-pager>
          </div>
        </div>
      </div>
    </div>

    <tree-model
      :visible.sync="treeVisible"
      :treeModelName="treeModelName"
      :treeForm="treeForm"
    ></tree-model>
    <content-model
      :visible.sync="modalVisible"
      :modelTitle="modelTitle"
      :rowId="rowId"
      :treeItem="treeItem"
    >
    </content-model>
  </div>
</template>

<script>
import bjIcon from "@/components/bj-icon";
import SelectBlock from "@/components/wisdom-beam/SelectBlock";
import TreeModel from "./components/TreeModel.vue";
import ContentModel from "./components/ContentModel.vue";
import {
  notificationTip,
  addAttributeByKey,
  downLoadBatchFileByArraybuffer,
} from "@/utils";
import {
  getFileManageTreeList,
  getFileManageTreeDelete,
  getFileList,
  getFileListDelete,
  exportData,
} from "@/api/wisdom-beam/standard-costs-app";
export default {
  components: {
    SelectBlock,
    bjIcon,
    TreeModel,
    ContentModel,
  },
  data() {
    return {
      conditions: {
        //标段
        orgCode: undefined,
        //文件名称
        fileName: "",
        //关键词
        nodeName: "",
      },
      /////////////////
      loading: false,
      selectMap: [
        //标段
        {
          type: "block",
          mode: "default",
          placeholder: "请选择标段",
        },
      ],
      nodeId: "",
      fileName: "",
      conditionsData: {},
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      //树
      nodeName: "",
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      //树弹框
      treeVisible: false,
      treeModelName: "",
      treeForm: {
        parentNode: "",
        nodeSort: "",
        nodeName: "",
        parentDeptCode: "",
        treeId: "",
      },
      //表格弹框
      modalVisible: false,
      modelTitle: "",
      rowId: "",
      treeItem: {},
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    //导出数据
    exportData() {
      let { orgCode, nodeName } = this.conditions;
      exportData({
        zhgdDeptCode: orgCode?.key || "",
        type: "lcSandard",
      }).then((data) => {
        downLoadBatchFileByArraybuffer(data, "标准化");
      });
    },

    //监听标段切换
    blockChange() {
      this.getTreeData();
    },
    //获取左侧树形数据集合
    getTreeData() {
      let { orgCode, nodeName } = this.conditions;
      getFileManageTreeList({
        nodeName,
        zhgdDeptCode: orgCode?.key || "",
        type: "lcSandard",
      })
        .then((res) => {
          let tree = res?.data?.result || [];
          //处理租户树形数据
          let filterData = addAttributeByKey(
            null,
            "scopedSlots",
            { icon: "custom" },
            tree,
            "zhgdNewFileNodeList"
          );
          let arr = this.getFirstNode(filterData);
          if (arr.length != 0) {
            this.nodeId = arr[arr.length - 1].id;
            this.treeItem = arr[arr.length - 1];
            this.expandedKeys = [this.nodeId];
            this.selectedKeys = [this.nodeId];
            this.getTableData();
          } else {
            this.nodeId = "";
            this.treeItem = {};
            this.expandedKeys = [];
            this.selectedKeys = [];
          }
          this.treeData = filterData;
        })
        .catch();
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    //树选择事件
    onSelect(selectedKeys, e) {
      this.selectedKeys = selectedKeys;
      let { dataRef } = e.node;
      let { id } = dataRef;
      this.treeItem = dataRef;
      this.nodeId = id;
      this.getTableData();
    },
    //左侧树菜单操作事件
    handelTreeMenu(type, id, zhgdDeptCode, parentNode, nodeSort, nodeName) {
      switch (type) {
        case "parentNode":
          this.treeModelName = "新增父节点";
          this.treeForm = {
            parentNode: "0",
            nodeSort: "",
            nodeName: "",
            parentDeptCode: "",
            treeId: "",
          };
          this.treeVisible = true;
          break;
        case "childNode":
          this.treeModelName = "新增子节点";
          this.treeForm = {
            parentNode: id,
            nodeSort: "",
            nodeName: "",
            parentDeptCode: zhgdDeptCode,
            treeId: "",
          };
          this.treeVisible = true;
          break;
        case "edit":
          if (parentNode == 0) this.treeModelName = "编辑父节点";
          else this.treeModelName = "编辑子节点";
          this.treeForm = {
            parentNode: parentNode,
            nodeSort: nodeSort,
            nodeName: nodeName,
            parentDeptCode: zhgdDeptCode,
            treeId: id,
          };
          this.treeVisible = true;
          break;
        case "delete":
          let that = this;
          const h = this.$createElement;
          this.$confirm({
            title: "您确定删除所选内容?",
            content: "删除内容后,将无法恢复。",
            okText: "确定",
            okType: "primary",
            cancelText: "取消",
            centered: true,
            icon: () =>
              h("a-icon", {
                props: {
                  type: "question-circle",
                  theme: "filled",
                },
                style: "color:#FB5A5A",
              }),
            onOk() {
              getFileManageTreeDelete(id)
                .then((res) => {
                  notificationTip("success", "删除成功!");
                  that.getTreeData();
                })
                .catch();
            },
            onCancel() {},
          });
          break;
        default:
          break;
      }
    },
    // 查找一个树多有第一个节点，深度遍历
    getFirstNode(tree) {
      var temp = [];
      var forFn = function (arr) {
        if (arr && arr.length > 0) {
          temp.push(arr[0]);
          if (arr[0].zhgdNewFileNodeList) {
            forFn(arr[0].zhgdNewFileNodeList);
          }
        }
      };
      forFn(tree);
      return temp;
    },
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    //获取表格数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { nodeId } = this;
      let { fileName } = this.conditions;
      getFileList({
        page,
        pageSize,
        fileName,
        nodeId,
      })
        .then((res) => {
          this.tableData = res.data.result.rows;
          this.pager.total = res.data.result.total;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    //监听分页
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    add() {
      this.rowId = "";
      this.modelTitle = "新增";
      this.modalVisible = true;
    },
    check(row) {
      this.rowId = row.id;
      this.modelTitle = "详情";
      this.modalVisible = true;
    },
    edit(row) {
      this.rowId = row.id;
      this.modelTitle = "编辑";
      this.modalVisible = true;
    },
    //删除
    handleDelClick(row) {
      let that = this;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          getFileListDelete(row.id)
            .then((res) => {
              notificationTip("success", "删除成功!");
              that.getTableData();
            })
            .catch();
        },
        onCancel() {},
      });
    },
    //查找下拉框的key 和 label
    filterkey(data = undefined) {
      return data ? data.key : "";
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  .flex();
}
.justify-content {
  justify-content: space-between;
}
.video-management-container {
  padding: 0 10px 10px 10px;
  height: 100%;
  .flex();
  flex-direction: column;
  .video-volatility-body {
    flex: 1;
    height: 100%;
    overflow: hidden;
    margin: 10px 0 0 0;
    .data-report-body {
      height: 100%;
      .flex();
      width: 100%;
      .video-menu {
        background-color: #fff;
        box-sizing: border-box;
        height: 100%;
        width: 340px;
        min-width: 340px;
        padding: 0px 15px 20px;
        .flex();
        flex-direction: column;
        /deep/.bj-icon {
          font-size: 12px;
        }
        .zhgd-data-report-header {
          padding-left: 0;
          padding-right: 0;
          .video-menu-icon {
            font-size: 22px;
            color: var(--primary-color);
            position: relative;
            top: 2px;
          }
        }
        .video-search {
          padding: 5px 0 15px 0;
        }
        .video-menu-tree {
          height: 100%;
          flex: 1;
          .custom-scrollbar();
          overflow-x: hidden !important;
          .menu-icon {
            height: 16px;
            width: 16px;
            margin-right: 10px;
          }
          .right-icon {
            margin-right: 5px;
          }
        }

        /deep/ .ant-tree-node-content-wrapper {
          position: relative;
        }
        /deep/.ant-tree-title {
          & span:first-of-type {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            width: 150px;
          }
        }
      }
      .video-body {
        background-color: #fff;
        margin-left: 2px;
        height: 100%;
        flex: 1;
        .flex();
        width: 1px;
        flex-direction: column;
        .video-menu-list {
          height: 100%;
        }
      }
    }
  }
}
//按钮
/deep/.vxe-table {
  .ant-btn {
    margin: 0 15px;
    color: var(--primary-color);
    position: relative;
    padding: 0;
    &::after {
      position: absolute;
      content: "";
      height: 14px;
      width: 1px;
      background: #dcdee2;
      right: -15px;
      top: 50%;
      transform: translateY(-50%);
    }
    &.del {
      color: var(--echart-pale-red);
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
  }
}
</style>
